<!--
 * @Descripttion: 意见箱 - 投诉与建议
 * @version: 
 * @Author: 王文豪
 * @Date: 2023-09-05 16:19:00
 * @LastEditors: 王文豪
 * @LastEditTime: 2023-11-28 10:16:42
-->
<template>
  <div class="mainPage">
    <div class="width1200 titleLine">
      <div class="title">意见箱</div>
    </div>
    <div class="width1200 bodyBlock">
      <div class="subTitle">投诉与建议</div>
      <div class="formLine" v-if="!endAdvice">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="投诉类型" prop="questionType">
            <el-select
              v-model="ruleForm.questionType"
              placeholder="请选择投诉类型"
            >
              <el-option label="投诉" value="01"></el-option>
              <el-option label="帮助" value="02"></el-option>
              <el-option label="咨询" value="03"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投诉标题" prop="title">
            <el-input
              v-model="ruleForm.title"
              placeholder="请输入投诉标题"
            ></el-input>
          </el-form-item>
          <el-form-item label="投诉内容" prop="content">
            <el-input type="textarea" v-model="ruleForm.content"></el-input>
          </el-form-item>
          <el-form-item label="上传附件" prop="attachmentList">
            <!-- <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="handleChange"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload> -->
            <uploadImg @set="getFile" ref="myUpload"></uploadImg>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="formLine" v-if="endAdvice">
        <div class="overAdvice">
          <img src="../../assets/ready.png" alt="" width="120" />
          <div class="tips">您的投诉与建议已提交成功</div>
          <span class="checkDetail" @click="pushToPersonalMessage"
            >查看投诉与建议</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import uploadImg from '@/components/uploadImg.vue'
const axios = require('axios');
export default {
  components: {uploadImg},
  data() {
    return {
      ruleForm: {
        title: "",
        questionType: "",
        content: "",
        attachmentList: [],
      },
      endAdvice: false,
      rules: {
        title: [{ required: true, message: "请输入投诉标题", trigger: "blur" }],
        questionType: [
          { required: true, message: "请选择投诉类型", trigger: "change" },
        ],
      },
      loading:false,
      fileList: [
        // {
        //   title: 'food.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }, {
        //   title: 'food2.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }
      ],
    };
  },
  computed: {},
  mounted() {},
  activated() {},
  methods: {
    getFile(res) {
      this.$set(this,'fileList',res)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let userInfo = JSON.parse(localStorage.getItem("userInfo"))
          this.loading = true
          let ipAddress = ''
          const url = "http://api.ipify.org?format=json";
          axios.get(url).then((response) => {
            ipAddress = response.data.ip;
            console.log(ipAddress);
            let fileList = []
            console.log('附件',this.fileList);
            if(this.fileList.length){
              fileList = this.fileList.map(item =>{
                return {
                  fileId:item.id,
                  fileName:item.attachmentUrl,
                  fileUrl:item.fileUrl,
                }
              })
            }
            // return
            let params = {
              customerName: userInfo.userName,
              businessName: userInfo.customerName,
              title: this.ruleForm.title,
              content: this.ruleForm.content,
              questionType: this.ruleForm.questionType,
              ipAddress: ipAddress,
              fileList:fileList
            };
            this.$api
              .giveAdvice(params)
              .then((res) => {
                console.log("res", res);
                this.loading = false
              })
              .catch((e) => {
                console.log(e);
                this.loading = false
              });
            /* 成功后显示成功提示页面 */
            this.endAdvice = true;
          });
          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // handleChange(file, fileList) {
    //   this.fileList = fileList.slice(-3);
    // },
    pushToPersonalMessage() {
      this.$router.push("myMessage");
    },
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
